<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>登录保护-国家公路网综合养护管理系统</title>
<block th:replace="commonBase"></block>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/plugins/layui/css/layui.css}"/>
<script th:src="@{/plugins/layui/layui.js}" type="text/javascript"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>   
</head>
<script th:inline="javascript" type="text/javascript">
 /*<![CDATA[*/
//var  teldata = [{id:"18101037995","name":"手机短信 (181****7995)"}];
	 
	/*]]>*/
</script>
<style type="text/css">
			body{
				margin: 0;
				padding: 0; 
				font-family: 微软雅黑;
			}
			#phone1{
				width: 266px;
				height: 25px; 
				margin-top:8px;
				margin-bottom: 10px;
				margin-left: 48px;
			}
			#code1{  
				width: 165px;
				height: 25px; 
				margin-top:8px;
				margin-bottom: 10px;
				margin-left: 48px;
			}	 
			#btnSendCode1{
				    width: 100px;
				    height: 29px;
				    padding: 0 0px;
				    /* margin: 0; */
				    margin-left: -5px;
				    margin-bottom: 4px;
				    font-size: 12px;
				    font-family: 微软雅黑;
				    text-align: center;
				    border-color: #a9a9a9;
				    /* background: transparent; */
				    border-radius: 0px;
				    color: #fff;
				    background-color: #1d9de1;
			}
	</style>
<body>
 	 		 
		<div id="win1" class="mini-window" title="手机号绑定" style="width:400px;height:265px;" 
    showMaxButton="false" showCollapseButton="false" showShadow="true" showCloseButton="false"
    showToolbar="true" showFooter="true" showModal="false" allowResize="false" allowDrag="false"
    >
   			<!--  <div style="font-size: 16px;font-family: 微软雅黑;font-weight: bold;"><i class="fa fa-gg" aria-hidden="true" style="color:#6fd311;font-weight: bold;">设置手机号</i></div> -->
			  <!-- <div style="width:380px;height:1px;margin:5px auto;padding:0px;background-color:#D5D5D5;overflow:hidden;"></div> -->
			  <div style="margin-left:10px;margin-top: 5px;margin-bottom:0px;font-size: 12px;font-family: 微软雅黑"><span th:text="${user.name}" style="color: red;font-size: 14px;" id="username"></span></div>
			  <div style="margin-left:55px;margin-top: 10px;margin-bottom:8px;font-size: 12px;font-family: 微软雅黑"><i class="fa fa-gg" aria-hidden="true" style="color:#1d9de1;font-weight: bold;font-size: 18px;"></i>为保证您的账号安全，请进行手机号绑定</div>
			 
			  <div>
			   		<input id="phone1" type="text" autocomplete="off" placeholder="请输入手机号码"/>
			  		<input id="code1" type="text" autocomplete="off"  placeholder="请输入验证码" />
			  		<input id="btnSendCode1" type="button" class="btn btn-default" value="获取短信验证码" onClick="sendMessage1()" />
			  </div>
			  
			<div class="mini-toolbar" style="text-align:center;height:35px;padding-top:18px;padding-bottom:0px;" 
		        borderStyle="border-left:0;border-bottom:0;border-right:0;">
		        <a class="mini-button" onclick="binding"  style="margin-left:-6px;width:280px;background-color: #1d9de1;color: #fff;margin-top: 6px;font-size:14px;">绑定并登录</a>
		    </div>
		</div>	
</body>
<script th:inline="javascript" type="text/javascript">
 /*<![CDATA[*/
 var layer=null;
layui.use(['layer','element'], function(){ //独立版的layer无需执行这一句
	  var $ = layui.jquery, layer = layui.layer,
	   element = layui.element;
});	
 
 	
 	mini.parse();
  	var win = mini.get("win1");
    win.showAtPos("center", "middle");
 
	var phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;//手机号正则 
			var count = 60; //间隔函数，1秒执行
			var InterValObj1; //timer变量，控制时间
			var curCount1;//当前剩余秒数
			/*第一*/
			function sendMessage1() {
				curCount1 = count;		 		 
				var mobile = $.trim($('#phone1').val());
				//var phone = mini.get("phone1").getValue();
				if (!phoneReg.test(mobile)) {
					layer.msg("无效的手机号码");
					return false;
				}
				  var index = layer.msg('正在发送验证码', {icon: 16,time:0});
				  $.ajax({
					  url:basePath+"sms/sendcode/"+mobile,
					  type: 'get',
					  data:null,
					  success: function (result) {
						  console.log(result);
						  layer.close(index);
						  if(result == "success"){
							  sendAgain();
						  }else{
							  layer.msg("验证码发送失败",{icon:2});
						  }
					  },
					  error:function (XMLHttpRequest, textStatus, errorThrown) {
				        	 layer.msg("验证出错", {time: 2000, icon:2});
				        }
				  });
				//向后台发送处理数据
			}

			function sendAgain(){
				//设置button效果，开始计时
				$("#btnSendCode1").attr("disabled", "true");
				$("#btnSendCode1").val( + curCount1 + "秒再获取");
				InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
			}

		

		
			
			
			function SetRemainTime1() {
				if (curCount1 == 0) {                
					window.clearInterval(InterValObj1);//停止计时器
					$("#btnSendCode1").removeAttr("disabled");//启用按钮
					$("#btnSendCode1").val("重新发送");
				}
				else {
					curCount1--;
					$("#btnSendCode1").val( + curCount1 + "秒再获取");
				}
			} 
			
			/*提交*/
			function binding(){
				 var phone = $.trim($('#phone1').val());//手机号码
				 var username = $.trim($('#username').text());
				 var code =$.trim($('#code1').val());
				 var sobj = {};//要提交的对象 
				 sobj.username = username;
				 sobj.phone = phone;
				 sobj.vercode = code;
				 console.log(sobj);
				  var index = layer.msg('正在验证，请稍候', {icon: 16});
				  $.ajax({
				        url: basePath+"sms/vali?type=bind",
						type: 'post',
				        data: {data:JSON.stringify(sobj)},
				        success: function (successData) {
				        	var obj = mini.decode(successData);
				        	layer.close(index);
				        	 if(obj.type == 200){
				        		 //验证通过，刷新页面
				        		 window.location.reload();
					    	 }
					    	 if(obj.type == 100){
					    		 layer.alert(obj.msg, {
					 	    	  title:"失败",
					 	    	  icon:2,
					 	    	  skin:'layui-layer-lan',
					 	    	  closeBtn: 0
					 	    	  });
					    	 }
				        },
				        error: function (XMLHttpRequest, textStatus, errorThrown) {
				        	 layer.msg("错误", {time: 2000, icon:2},function(){
				        		 parent.layer.closeAll();
				        	 });
				        }
				    });
			}
/*]]>*/
</script>
</html>